<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
		<title>v-for</title>
		<link rel="stylesheet" href="">
		<script type="text/javascript" src="node_modules/_vue@2.6.10@vue/dist/vue.js"></script>
		<style type="text/css">
			div{
				border: 1px solid red;
				margin-bottom: 20px;
			}
			p{
				border-bottom: 1px solid #333;
			}
			span{
				border: 1px solid blueviolet;
				margin-right: 10px;
			}
		</style>
	</head>
	<body>
	    <section id="div">
			<div>
				<p v-for="li  in list" >name:{{li.name}}  age: {{li.age}} sex: {{li.sex}}</p>
			</div>

			<div>
				<p v-for="(arr, key) in array">{{key}}:{{arr}}</p>
			</div>

			<div>
				<p v-for="(arr, key,index) in array" :key="arr.id">{{key}}:{{arr}},{{index}}</p>
			</div>
			<div>
				<p v-for="arr in array">{{arr}}</p>
			</div>

			<div>
				<span v-for="(num,index) in 10" :title="msg">{{num}}  ,{{index}}</span>
			</div>

	    </section>
	    <script type="text/javascript">
	    	var div = new Vue({
	    		el:'#div',
	    		data(){
	    			return{
						list:[
							{name:'张三',age:14,sex:'男'},
							{name:'李四',age:15,sex:'男'},
							{name:'王五',age:16,sex:'男'}

						],
						array:{name:'赵六',age:18,sex:'男'},
						msg:'页面加载于'+new Date().toLocaleString()

	    			}

	    		},
	    		methods:{
	    			
	    		}
	    	});
	    </script>
	</body>
</html>